<template>
	<view class="goods-container flex">
		<view class="goods-box" v-for="(item, index) in goodsList" :key="index">
			<navigator hover-class="none"
				:url="'/pages/goods/goods-detail/index?id=' + item.id + '&shopId=' + shopInfo.id">
				<view class="content">
					<view class="img-box">
						<view class="" style="position: relative;height: 100%;" v-if="item.prescription=='2'">
							<view class="flex flex-column-center"
								style="position: absolute;width: 100%;height:100%;z-index: 50;align-items: center;">
								<view class="" style="font-size: 24rpx;">处方药依法不展示包装</view>
								<view class="" style="font-size: 24rpx;">请在药师指导下使用</view>
							</view>
							<image :src="item.picUrls[0] ? item.picUrls[0] : '/static/image/no_pic.png'"
								class="image" style="filter: blur(5rpx);">
						</view>
						<image :src="item.picUrls[0] ? item.picUrls[0] : '/static/image/no_pic.png'" class="image"
							v-if="item.prescription!='2'">
						</image>
					</view>
					<view class="text-black padding-lr-sm overflow-2 text_style text-sm">{{item.name}}</view>
					<view class="flex justify-between margin-top-sm align-center">
						<!-- 单sku -->
						<view class="flex" v-if="item.priceDown==item.priceUp">
							<view class="text-price text-bold text-red text-lg padding-lr-sm">
								<text v-if="!item.marketingPrice">{{item.priceDown}}</text>
								<text v-else-if="item.marketingPrice >= item.priceDown">{{item.marketingPrice}}</text>
								<text v-else>
									<text>{{item.marketingPrice}}</text>
									<text style="text-decoration:line-through;font-size: 22rpx;margin-left: 10rpx;"
										class="text-gray text-price">{{item.priceDown}}</text>
								</text>
							</view>
							<view v-if="item.level1Brokerage" style="width: 160rpx;font-size: 22rpx;background-color: #baa898;padding: 2rpx 15rpx;border-radius: 8rpx;">
								<text class="cuIcon-moneybag" style="margin-right: 6rpx;color: #FED76A;"></text>
								<text class="text-black">赚</text>
								<text class="text-price text-black">{{ item.level1Brokerage.toFixed(2)}}</text>
							</view>
						</view>						
						<!-- 多sku -->
						<view class="text-price text-bold text-red text-lg padding-lr-sm"
							v-if="item.priceDown<item.priceUp">{{item.priceDown}}~{{item.priceUp}}</view>
					</view>
					<view class="cfBox" v-if="item.prescription == 2">处方药</view>
					<view class="preBox" v-if="item.isPressell==1">预约</view>					
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modalCoupon: false,
				mask: false,
				couponInfoList: [1, 2],
				shopsList: [], //门店列表
				goodsId: '',
				shopInfo: {}
			};
		},

		components: {
		},
		props: {
			goodsList: {
				type: Array,
				default: () => []
			}
		},
		mounted() {
			let that = this
			uni.$on('shopInfo', function(item) {
				that.shopInfo = item
			})
			const value = uni.getStorageSync('shopsList');
			that.shopsList = value
			uni.$on('shopsList', function(data) {
				that.shopsList = data
			})
		},
		methods: {
			showShops(id) {
				uni.$emit('goodsId', id)
				this.goodsId = id
				this.modalCoupon = true;
				this.mask = true
			},
			handel() {
				this.mask = false
			}
		}
	};
</script>
<style>
	.goods-container {
		justify-content: space-between;
		flex-wrap: wrap;
		box-sizing: content-box;
		padding: 20rpx;
	}

	.goods-box {
		width: 349rpx;
		height: 560rpx;
		background-color: #fff;
		overflow: hidden;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		box-shadow: 0px 10px 10px #e5e5e5;
	}

	.goods-box .img-box {
		width: 100%;
		height: 349rpx;
		overflow: hidden;
	}

	.goods-box .img-box .image {
		width: 100%;
		height: 349rpx;
	}

	.moreShop {
		margin-left: 15rpx;
		margin-top: 10rpx;
		height: 60rpx;
	}

	.text_style {
		width: 348rpx;
		height: 76rpx;
		margin-top: 25rpx;
	}

	.content {
		position: relative;
		padding-top: 20rpx;
	}

	.cfBox {
		width: 100rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		background-color: #00a6ba;
		position: absolute;
		left: 0;
		top: 0;
		color: white;
		border-radius: 10rpx;
	}
	
	.preBox {
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		background-color: #F76164;
		position: absolute;
		left: 0;
		top: 329rpx;
		color: white;
		opacity: 0.8;
	}
</style>
